import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import '../../index.css'
export default class List extends Component {

    state = {
        users: [], //初始化数据,users初始值为空数组
        isFirst: true, //是否第一次打开页面
        isLoading: false, //是否加载中
        err: '', //保存错误信息
        current: 1, //当前页码
        pageSize: 30, //每页显示的条数
        goValue: 0,  //要取的条数index
        totalPage: 0,//总页数
    };

    componentDidMount(){
        this.token = PubSub.subscribe('myList',(_,stateObj)=>{
            this.setState(stateObj)
        })
    }

    componentWillUnmount(){
        PubSub.unsubscribe(this.token);
    }
    

    render() {
        const {users,isFirst,isLoading,err} = this.state
        return (
            <div className="row">
                {
                    isFirst ? <h3>欢迎使用，请输入内容，查询数据</h3> :
                    isLoading ? <h3>Loading...</h3> :
                    err ? <h3 className="errClass">{err}</h3> :
                    users.items.map((userObj) => {
                        return (
                            <div className="card" key={userObj.id}>
                                <a href={userObj.html_url} target="_blank" rel="noreferrer">
                                    <img alt="head_portrait" src={userObj.avatar_url} style={{ width: '100px' }} />
                                </a>
                                <p className="card-text">{userObj.login}</p>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}